<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>todoList</title>
        <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
        <link rel="stylesheet" href="/assets/styles.css" />
        <script src="/assets/todo-list.js"></script>
    </head>
    <body>
        <div id="todo-table">
            <form action="">
                <input
                    style="width: 50%;box-sizing: border-box;"
                    type="text"
                    name="item"
                    placeholder="Add new item..."
                    required
                />
                <button style="width:50%" type="submit">Add Item</button>
            </form>
            <ul>
                <% todos.forEach(function(todo){ %>
                <li>
                    <%= todo.item %>
                </li> 
                <% }) %>
            </ul>
        </div>
    </body>
</html>
